<style lang="less" scoped>

.service-outlets {
    .tabs-header {
        position: relative;
        h1 {
            font-size: 20px;
        }
        .outlets {
            position: absolute;
            right: 0;
            margin: 0;
            padding: 0;
            list-style-type: none;
            display: flex;
            flex-flow: row nowrap;
            height: 100%;
            >li {
                cursor: pointer;
                padding-top: 5px;
                &:not(:last-child) {
                    margin-right: 30px;
                }
                &.dropdown {
                    position: relative;
                    .dropdown-list {
                        margin: 0;
                        list-style-type: none;
                        display: none;
                        position: absolute;
                        background-color: #fff;
                        left: -50px;
                        top: 70%;
                        width: 100px;
                        flex-flow: column;
                        border-radius: 4px;
                        padding: 15px;
                        border: 1px solid #dddddd;
                        li {
                            padding: 5px 0;
                            &:hover {
                                box-shadow: inset 0px -1px 0px #37ca73;
                            }
                        }
                    }
                    &:hover {
                        .dropdown-list {
                            display: flex;
                        }
                    }
                }
                &:hover,
                &.active {
                    border-bottom: 1px solid #37ca73;
                }
            }
        }
    }

    .tab{
      .tab-item{
        cursor: pointer;
        padding: 15px 30px;

        &:hover{
          background-color: #F7F9FB;
        }
        h1{
          font-size: 15px;
          color: #222222;
          font-weight: bold;
        }

        p{
          color: #666666;
          font-size: 14px;
        }

        .contact-btn{
          /* margin-top: 30px; */
          background-color: #fff;
          border: 1px solid #37CA73;
          outline: none;
          &:hover{
            background-color: #37CA73;
            color: #fff;
          }
        }
      }
    }
}

</style>

<template>

<div class="row margin-reset  service-outlets" id="serviceOutlets">
    <div class="page-header tabs-header">
        <ul class="outlets">
            <li v-for="tab in testData" class="{'active': isActive(tab.id)}" @click="changeTab(tab.id)">
              {{tab.name}}
            </li>
            <li class="dropdown" v-if="anotherData.length > 0">
                更多
                <i class="fa fa-angle-down"></i>
                <ul class="dropdown-list" style="z-index: 2000;">
                   <li v-for="tab in anotherData" class="{'active': isActive(tab.id)}" @click="changeTab(tab.id)">
                    {{tab.name}}
                   </li>
                </ul>
            </li>
        </ul>
        <h1>服务网点</h1>
    </div>

    <div v-for="tab in allData" :key="tab" class="tab" v-show="isActive(tab.id)">
        <div class="row margin-reset">
            <div class="col-sm-12 tab-item" v-for="item in tab.shops" :key="item">
                <button class="pull-right contact-btn" type="button" name="button" @click="showPhone(item.phone)">联系我们</button>
                <div style="margin-top: 2px;">
                  <b style="margin-right: 30px;"><span v-text="item.name"></span></b>
                  <span class="text-gray">地址：{{item.address}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

</template>

<script>

export default {
    name: "serviceOutlets",
    data: () => ({
        testData: [],
        anotherData: [],
        allData: [],
        activeId: 1,
    }),
    mounted () {
    },
    methods: {
        isActive: function(id) {
            if (this.activeId === id) {
                return true
            } else {
                return false
            }
        },
        showPhone: function(phone) {
          alert(phone)
        },
        changeTab: function(id) {
            this.activeId = id
        },
        initData () {
          let self = this
          $.get("/get_service_outlets.html", function(data) {
            self.activeId = data[0].id
            self.testData = data.slice(0, 3)
            self.anotherData = data.slice(4, data.length)
            console.log(self.anotherData)
            self.allData = self.testData.concat(self.anotherData)
          })
        }
    },
    mounted() {
        this.initData();
    }
}

</script>
